<!-- 登录页 -->
<template>
	<view class="login_con">
		<image class="login_logo" src="../../static/icons/sportsLogin.png" mode="widthFix"></image>
		<view class="login_table">
			<view class="title_font">
				<image class="company_logo" src="../../static/icons/logo.svg" mode="widthFix"></image>
				<text class="company_font">旷览智慧体育</text>
			</view>
			<view class="input_con">
				<uni-easyinput class="input_" prefixIcon="person" v-model="userAccount" placeholder="请输入账号" >
				</uni-easyinput>
				<uni-easyinput class="input_" type="password" prefixIcon="locked" v-model="userPassword" placeholder="请输入密码" >
				</uni-easyinput>
			</view>
			<button class="login_btn" @click="loginMethod">登录</button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref ,onMounted} from 'vue';
	import requester from "../../server/requester";
	
	onMounted(()=>{
		// 生命周期内 进入login 页面 则删除本地已储存的 token
		try {
			uni.removeStorageSync('user_token');
			uni.removeStorageSync('userInfo');
		} catch (e) {
			// error
		}
		
	})
	let userAccount:any = ref('')
	let userPassword:any = ref('')
	const loginMethod = async()=>{
		let data = {
			sysAccount: userAccount.value,
			password: userPassword.value
		}
		let result:any = await requester({
			url:'/AiSports/accountLogin',
			method:'POST',
			data,
		})
		console.log('登录结果',result);
		if (result.data.success ){
			uni.showToast({
				title:result.data.message,
				duration: 2000,
				icon:'none'
			})
			//登录成功则将token 存入本地
			
			uni.setStorageSync('user_token',result.data.token);
			
			uni.setStorageSync('userInfo',result.data.data.name);
			
			//跳转至首页
			uni.navigateTo({
				url:"/pages/index/index"
			})
		}else{
			uni.showToast({
				title:result.data.message,
				duration: 2000,
				icon:'none'
			})
		}
	}
</script>

<style>
.login_con{
	width: 100vw;
	display: flex;
	background-color: #fff;
	height: 100vh;
}
.login_logo{
	width: 50vw;
	margin: auto 0;
	margin-left: 5vw;
}
.login_table{
	margin: auto 0;
	margin-left: 5vw;
}

.title_font{
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		margin-bottom: 3vh;
	}
	.company_logo{
		width: 3vw;
		margin: 0 1vw;
	}

	.company_font{
		font-size: 2rem;
	}
	.input_con{
		margin: 10vh 0;
	}
	.input_{
		border: none;
		margin: 2vh 0;
	}
	.login_btn{
			 width: 30vw;
			 border-radius: 4vh;
			 border: none;
			 color: white;
			 background-color: #00aaff;
			 margin-top: 5vh;
	}
</style>
